<template>
  <div class="resume-form">
    <!-- 审核状态显示 - 新建简历时不显示 -->
    <ResumeStatusTag 
      v-if="!props.isNew"
      :status="resumeStatus" 
      :reject-reason="rejectReason"
      :incomplete-fields="incompleteFields"
    />
    
    <!-- 状态刷新按钮 - 新建简历时不显示 -->
    <div v-if="!props.isNew" class="status-refresh-section">
      <div class="status-info">
        <span class="status-label">{{ $t('resume.currentStatus') }}</span>
        <el-tag 
          :type="getStatusType(resumeStatus)" 
          size="small"
        >
          {{ getStatusText(resumeStatus) }}
        </el-tag>
      </div>
      <div class="status-actions">
        <el-button 
          link
          size="small" 
          @click="loadResumeStatus"
          :loading="loadingStatus"
        >
          <el-icon><Refresh /></el-icon>
          {{ $t('resume.refreshStatus') }}
        </el-button>

      </div>
    </div>
    
    <!-- 必填字段提示 - 新建简历时显示简化版本 -->
    <div v-if="props.isNew" class="required-fields-notice">
      <div class="notice-content">
        <h4>{{ $t('resume.newResume') }}</h4>
        <p>{{ $t('resume.requiredFieldsNotice') }}</p>
      </div>
    </div>
    
    <!-- 必填字段提示 - 编辑简历时显示完整版本 -->
    <div v-else class="required-fields-notice" :class="{ 'incomplete': resumeStatus === 'incomplete' }">
      <div class="notice-content">
        <h4>{{ $t('resume.requiredInfo') }}</h4>
        <p>{{ $t('resume.requiredFieldsFull') }}</p>
        <div v-if="resumeStatus === 'incomplete' && incompleteFields.length > 0" class="missing-fields">
          <p><strong>{{ $t('resume.currentMissing') }}</strong></p>
          <ul>
            <li v-for="field in incompleteFields" :key="field">{{ field }}</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 基本信息 -->
    <div class="form-section">
      <h2 class="section-title">{{ $t('resume.personalInfo') }}</h2>
      

      
      <!-- 个人信息表单 -->
      <div class="form-grid">
        <div class="form-group">
          <label>{{ $t('resume.firstName') }}</label>
          <input 
            type="text" 
            v-model="resumeStore.profile.firstName" 
            :placeholder="$t('resume.firstNamePlaceholder')"
          />
        </div>

        <div class="form-group">
          <label>{{ $t('resume.lastName') }}</label>
          <input 
            type="text" 
            v-model="resumeStore.profile.lastName" 
            :placeholder="$t('resume.lastNamePlaceholder')"
          />
        </div>

        <div class="form-group">
          <label>{{ $t('resume.chineseName') }}</label>
          <input 
            type="text" 
            v-model="resumeStore.profile.name" 
            :placeholder="$t('resume.chineseNamePlaceholder')"
          />
        </div>

        <div class="form-group">
          <label>{{ $t('resume.birthDate') }}</label>
          <input 
            type="date" 
            v-model="resumeStore.profile.birthDate" 
          />
        </div>

        <div class="form-group">
          <label>{{ $t('resume.nationality') }}</label>
          <select v-model="resumeStore.profile.nationality" @focus="loadNationalities" :disabled="nationalityLoading">
            <option value="">{{ $t('resume.selectNationality') }}</option>
            <option 
              v-for="nationality in nationalityOptions" 
              :key="nationality.value" 
              :value="nationality.label"
            >
              {{ nationality.label }}
            </option>
          </select>
        </div>


        <div class="form-group">
          <label>{{ $t('resume.phone') }}</label>
          <input type="text" v-model="resumeStore.profile.phone" :placeholder="$t('resume.phonePlaceholder')">
        </div>
        <div class="form-group">
          <label>{{ $t('resume.email') }}</label>
          <input type="email" v-model="resumeStore.profile.email" :placeholder="$t('resume.emailPlaceholder')">
        </div>
        <div class="form-group">
          <label>{{ $t('resume.gender') }}</label>
          <select v-model="resumeStore.profile.gender">
            <option value="">{{ $t('resume.selectGender') }}</option>
            <option value="男">{{ $t('resume.male') }}</option>
            <option value="女">{{ $t('resume.female') }}</option>
            <option value="其他">{{ $t('resume.other') }}</option>
          </select>
        </div>

        
        <div class="form-group">
          <label>{{ $t('resume.wechat') }}</label>
          <input 
            type="text" 
            v-model="resumeStore.profile.wechat" 
            :placeholder="$t('resume.wechatPlaceholder')"
          />
        </div>
      </div>
    </div>

    <!-- 教育经历 -->
    <div class="form-section">
      <h2 class="section-title">{{ $t('resume.education') }}</h2>
      <div class="education-container">
        <div class="education-fields">
          <div 
            v-for="(education, index) in resumeStore.education" 
            :key="index" 
            class="education-item"
          >
            <div class="education-header">
              <h4>{{ $t('resume.educationItem') }} {{ index + 1 }}</h4>
              <button 
                v-if="resumeStore.education.length > 1"
                @click="removeEducation(index)" 
                class="remove-education-btn"
                type="button"
              >
                {{ $t('resume.removeEducation') }}
              </button>
            </div>
            
            <div class="education-form-grid">
              <div class="form-group">
                <label>{{ $t('resume.major') }}</label>
                <input 
                  type="text" 
                  v-model="education.major" 
                  :placeholder="$t('resume.majorPlaceholder')"
                />
              </div>

              <div class="form-group">
                <label>{{ $t('resume.degree') }}</label>
                <select v-model="education.degree">
                  <option value="">{{ $t('resume.selectDegree') }}</option>
                  <option value="高中">{{ $t('resume.highSchool') }}</option>
                  <option value="专科">{{ $t('resume.college') }}</option>
                  <option value="本科">{{ $t('resume.bachelor') }}</option>
                  <option value="硕士">{{ $t('resume.master') }}</option>
                  <option value="博士">{{ $t('resume.doctor') }}</option>
                  <option value="博士后">{{ $t('resume.postDoctor') }}</option>
                  <option value="其他">{{ $t('resume.other') }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        
        <button 
          @click="addEducation()" 
          class="add-education-btn"
          v-if="resumeStore.education.length < 5"
        >
          <span class="add-icon">+</span>
          {{ $t('resume.addEducation') }}
        </button>
      </div>
    </div>

    <!-- 语言与技能 -->
    <div class="form-section">
      <h2 class="section-title">{{ $t('resume.languageAndSkills') }}</h2>
      <div class="skills-container">
        <div class="form-group">
          <label>{{ $t('resume.language') }}</label>
          <div class="tag-input-container">
            <input 
              type="text" 
              v-model="newLanguage"
              @keyup.enter="addLanguage"
              :placeholder="$t('resume.languagePlaceholder')"
              class="tag-input"
            />
            <div class="tags-display">
              <span 
                v-for="(language, index) in resumeStore.languages" 
                :key="index" 
                class="tag"
              >
                {{ language }}
                <button @click="removeLanguage(index)" class="tag-remove">{{ $t('resume.tagRemove') }}</button>
              </span>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>{{ $t('resume.skills') }}</label>
          <div class="tag-input-container">
            <input 
              type="text" 
              v-model="newSkill"
              @keyup.enter="addSkill"
              :placeholder="$t('resume.skillsPlaceholder')"
              class="tag-input"
            />
            <div class="tags-display">
              <span 
                v-for="(skill, index) in resumeStore.skills" 
                :key="index" 
                class="tag"
              >
                {{ skill }}
                <button @click="removeSkill(index)" class="tag-remove">{{ $t('resume.tagRemove') }}</button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 经验模块 -->
    <div class="form-section">
      <h2 class="section-title">{{ $t('resume.experience') }}</h2>
      <div class="experience-container">
        <div class="form-group">
          <label>{{ $t('resume.workExperience') }}</label>
          
          <!-- 富文本工具栏 -->
          <div class="editor-toolbar">
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="toggleBold"
              :class="{ active: isBold }"
              :title="$t('resume.bold')"
            >
              <strong>B</strong>
            </button>
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="toggleItalic"
              :class="{ active: isItalic }"
              :title="$t('resume.italic')"
            >
              <em>I</em>
            </button>
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="toggleUnderline"
              :class="{ active: isUnderline }"
              :title="$t('resume.underline')"
            >
              <u>U</u>
            </button>
            <div class="toolbar-separator"></div>
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="alignLeft"
              :class="{ active: isAlignLeft }"
              :title="$t('resume.alignLeft')"
            >
              ⬅
            </button>
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="alignCenter"
              :class="{ active: isAlignCenter }"
              :title="$t('resume.alignCenter')"
            >
              ↔
            </button>
            <button 
              type="button" 
              class="toolbar-btn" 
              @click="alignRight"
              :class="{ active: isAlignRight }"
              :title="$t('resume.alignRight')"
            >
              ➡
            </button>
            <div class="toolbar-separator"></div>
            <button 
              type="button" 
              class="toolbar-btn module-btn" 
              @click="addModule"
              :title="$t('resume.addModule')"
            >
              <span class="module-icon">+</span>
            </button>
            <div class="toolbar-separator"></div>
            <select class="font-select" @change="changeFont" v-model="selectedFont">
              <option value="Arial">{{ $t('resume.fontArial') }}</option>
              <option value="Times New Roman">{{ $t('resume.fontTimesNewRoman') }}</option>
              <option value="Courier New">{{ $t('resume.fontCourierNew') }}</option>
              <option value="Georgia">{{ $t('resume.fontGeorgia') }}</option>
              <option value="Verdana">{{ $t('resume.fontVerdana') }}</option>
            </select>
          </div>
          
          <div 
            class="rich-text-editor" 
            contenteditable="true"
            @input="handleEditorInput"
            @paste="handlePaste"
            @mouseup="handleEditorSelection"
            @keyup="handleEditorSelection"
            ref="editor"
            :placeholder="$t('resume.experiencePlaceholder')"
          ></div>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-section">
      <button class="submit-btn" @click="submitResume">
        <span class="submit-icon">📄</span>
        {{ $t('resume.submitResume') }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useResumeStore } from '../../stores/resume'
import { studentApi } from '@/api'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import ResumeStatusTag from './ResumeStatusTag.vue'
import { useI18n } from 'vue-i18n'

// 使用i18n
const { t } = useI18n()

// 定义 props
const props = defineProps({
  isNew: {
    type: Boolean,
    default: false
  },
  resumeStatus: {
    type: String,
    default: 'pending'
  }
})

// 使用 store
const resumeStore = useResumeStore()

// 审核状态相关数据
const resumeStatus = ref(props.resumeStatus) // 使用传入的状态
const rejectReason = ref('')
const incompleteFields = ref([])
const loadingStatus = ref(false)

// 监听 props 变化，更新状态
watch(() => props.resumeStatus, (newStatus) => {
  if (newStatus && !props.isNew) {
    resumeStatus.value = newStatus
  }
})



// 加载简历审核状态
const loadResumeStatus = async () => {
  loadingStatus.value = true
  try {
    const response = await studentApi.getResumeStatus()
    
    if (response.code === 200) {
      const newStatus = response.data?.resumeStatus || 'pending'
      resumeStatus.value = newStatus
      rejectReason.value = response.data?.rejectionReason || ''
      incompleteFields.value = response.data?.incompleteFields || []
    } else {
      console.error('获取简历状态失败:', response.message)
    }
  } catch (error) {
    console.error('获取简历状态失败:', error)
  } finally {
    loadingStatus.value = false
  }
}

// 检查必填字段完整性
const checkRequiredFields = () => {
  const requiredFields = []
  const profile = resumeStore.profile
  
  if (!profile.firstName && !profile.name) {
    requiredFields.push(t('resume.firstNameOrChineseName'))
  }
  if (!profile.gender) {
    requiredFields.push(t('resume.gender'))
  }
  if (!profile.nationality) {
    requiredFields.push(t('resume.nationality'))
  }
  if (!profile.birthDate) {
    requiredFields.push(t('resume.birthDate'))
  }
  if (!profile.phone) {
    requiredFields.push(t('resume.phoneNumber'))
  }
  if (!profile.email) {
    requiredFields.push(t('resume.emailAddress'))
  }
  
  return requiredFields
}

// 自动检查简历完整性并更新状态
const autoCheckResumeCompleteness = () => {
  const missingFields = checkRequiredFields()
  if (missingFields.length > 0) {
    // 如果有缺失字段，更新状态为不完整
    resumeStatus.value = 'incomplete'
    incompleteFields.value = missingFields
  } else if (resumeStatus.value === 'incomplete') {
    // 如果之前是不完整状态，现在完整了，重新从后端获取状态
    loadResumeStatus()
  }
}

// 获取状态类型
const getStatusType = (status) => {
  // 处理空值或未定义的情况
  if (!status || status === '') return 'info'
  
  const typeMap = {
    pending: 'warning',
    pending_review: 'warning',
    approved: 'success',
    incomplete: 'warning',
    rejected: 'danger',
    draft: 'info',
    submitted: 'warning',
    reviewing: 'warning',
    active: 'success',
    inactive: 'info',
    expired: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  // 处理空值或未定义的情况
  if (!status || status === '') return t('resume.statusDraft')
  
  const textMap = {
    pending: t('resume.pendingReview'),
    pending_review: t('resume.pendingReview'),
    approved: t('resume.approved'),
    incomplete: t('resume.incompleteInfo'),
    rejected: t('resume.rejected'),
    draft: t('resume.statusDraft'),
    submitted: t('resume.statusSubmitted'),
    reviewing: t('resume.statusReviewing'),
    active: t('resume.statusActive'),
    inactive: t('resume.statusInactive'),
    expired: t('resume.statusExpired')
  }
  return textMap[status] || t('resume.unknownStatus')
}



// 自定义标签输入
const newLanguage = ref('')
const newSkill = ref('')

// 个人优势显示状态
const showPersonalAdvantages = ref(false)

const addLanguage = () => {
  if (newLanguage.value.trim()) {
    resumeStore.languages.push(newLanguage.value.trim())
    newLanguage.value = ''
  }
}

const removeLanguage = (index) => {
  resumeStore.languages.splice(index, 1)
}

const addSkill = () => {
  if (newSkill.value.trim()) {
    resumeStore.skills.push(newSkill.value.trim())
    newSkill.value = ''
  }
}

const removeSkill = (index) => {
  resumeStore.skills.splice(index, 1)
}



// 添加教育经历
const addEducation = () => {
  resumeStore.education.push({
    school: '',
    major: '',
    degree: '',
    startDate: '',
    endDate: ''
  })
}

// 删除教育经历
const removeEducation = (index) => {
  if (resumeStore.education.length > 1) {
    resumeStore.education.splice(index, 1)
  }
}

// 富文本编辑器相关
const editor = ref(null)
const selectedFont = ref('Arial')
const isBold = ref(false)
const isItalic = ref(false)
const isUnderline = ref(false)
const isAlignLeft = ref(true)
const isAlignCenter = ref(false)
const isAlignRight = ref(false)

// 更新内容
const updateContent = () => {
  if (editor.value) {
    const content = editor.value.innerHTML
    resumeStore.experience = content
  }
}

// 确保编辑器有焦点
const ensureFocus = () => {
  if (editor.value) {
    editor.value.focus()
  }
}

// 处理粘贴
const handlePaste = (event) => {
  event.preventDefault()
  ensureFocus()
  const text = event.clipboardData.getData('text/plain')
  document.execCommand('insertText', false, text)
  updateContent()
}

// 切换粗体
const toggleBold = () => {
  ensureFocus()
  document.execCommand('bold', false, null)
  updateContent()
  // 更新按钮状态
  setTimeout(() => {
    isBold.value = document.queryCommandState('bold')
  }, 0)
}

// 切换斜体
const toggleItalic = () => {
  ensureFocus()
  document.execCommand('italic', false, null)
  updateContent()
  // 更新按钮状态
  setTimeout(() => {
    isItalic.value = document.queryCommandState('italic')
  }, 0)
}

// 切换下划线
const toggleUnderline = () => {
  ensureFocus()
  document.execCommand('underline', false, null)
  updateContent()
  // 更新按钮状态
  setTimeout(() => {
    isUnderline.value = document.queryCommandState('underline')
  }, 0)
}

// 左对齐
const alignLeft = () => {
  ensureFocus()
  document.execCommand('justifyLeft', false, null)
  isAlignLeft.value = true
  isAlignCenter.value = false
  isAlignRight.value = false
  updateContent()
}

// 居中对齐
const alignCenter = () => {
  ensureFocus()
  document.execCommand('justifyCenter', false, null)
  isAlignLeft.value = false
  isAlignCenter.value = true
  isAlignRight.value = false
  updateContent()
}

// 右对齐
const alignRight = () => {
  ensureFocus()
  document.execCommand('justifyRight', false, null)
  isAlignLeft.value = false
  isAlignCenter.value = false
  isAlignRight.value = true
  updateContent()
}

// 改变字体
const changeFont = () => {
  ensureFocus()
  document.execCommand('fontName', false, selectedFont.value)
  updateContent()
}

// 监听编辑器内容变化
const handleEditorInput = () => {
  updateContent()
}

// 添加模块功能
const addModule = () => {
  const selection = window.getSelection()
  if (!selection.rangeCount) {
    ElMessage.warning(t('resume.selectTextForModule'))
    return
  }
  
  const range = selection.getRangeAt(0)
  const selectedText = selection.toString().trim()
  
  if (!selectedText) {
    ElMessage.warning(t('resume.selectTextForModule'))
    return
  }
  
  // 创建标题元素
  const titleElement = document.createElement('h3')
  titleElement.className = 'module-title'
  titleElement.textContent = selectedText
  
  // 创建分割线元素
  const dividerElement = document.createElement('div')
  dividerElement.className = 'module-divider'
  
  // 删除选中的文字
  range.deleteContents()
  
  // 插入标题
  range.insertNode(titleElement)
  
  // 创建换行元素
  const brElement = document.createElement('br')
  
  // 插入分割线
  range.insertNode(brElement)
  range.insertNode(dividerElement)
  
  // 再插入一个换行
  range.insertNode(brElement)
  
  // 将光标移动到分割线后面
  range.setStartAfter(brElement)
  range.setEndAfter(brElement)
  selection.removeAllRanges()
  selection.addRange(range)
  
  // 更新编辑器内容
  updateContent()
  
  ElMessage.success(t('resume.moduleTitleAdded'))
}

// 监听编辑器选择变化，更新按钮状态
const handleEditorSelection = () => {
  setTimeout(() => {
    isBold.value = document.queryCommandState('bold')
    isItalic.value = document.queryCommandState('italic')
    isUnderline.value = document.queryCommandState('underline')
  }, 0)
}

// 初始化编辑器内容
const initEditorContent = () => {
  if (editor.value && resumeStore.experience) {
    editor.value.innerHTML = resumeStore.experience
  }
}

// 监听store中的experience变化
watch(() => resumeStore.experience, (newContent) => {
  if (editor.value && newContent !== editor.value.innerHTML) {
    editor.value.innerHTML = newContent
  }
}, { immediate: true })

// 国籍选项
const nationalityOptions = ref([])
const nationalityLoading = ref(false)



// 获取国籍列表
const loadNationalities = async () => {
  // 如果已经加载过，就不再重复加载
  if (nationalityOptions.value.length > 0) {
    return
  }
  
  nationalityLoading.value = true
  try {
    const response = await studentApi.getNationalities()
    
    if ((response.code === 'SUCCESS' || response.code === 200) && response.data && Array.isArray(response.data)) {
      // 使用返回数据中的label字段作为下拉选项
      nationalityOptions.value = response.data.map(item => ({
        value: item.value,
        label: item.label
      }))
    } else {
      // 如果接口失败，使用默认国籍列表
      nationalityOptions.value = [
        { value: 1, label: t('resume.china') },
        { value: 2, label: t('resume.usa') },
        { value: 3, label: t('resume.uk') },
        { value: 4, label: t('resume.canada') },
        { value: 5, label: t('resume.australia') },
        { value: 6, label: t('resume.japan') },
        { value: 7, label: t('resume.korea') },
        { value: 8, label: t('resume.germany') },
        { value: 9, label: t('resume.france') },
        { value: 10, label: t('resume.singapore') },
        { value: 11, label: t('resume.malaysia') },
        { value: 12, label: t('resume.thailand') },
        { value: 13, label: t('resume.vietnam') },
        { value: 14, label: t('resume.india') },
        { value: 15, label: t('resume.russia') },
        { value: 16, label: t('resume.other') }
      ]
    }
  } catch (error) {
    console.error('加载国籍列表失败:', error)
    // 如果接口失败，使用默认国籍列表
    nationalityOptions.value = [
      { value: 1, label: t('resume.china') },
      { value: 2, label: t('resume.usa') },
      { value: 3, label: t('resume.uk') },
      { value: 4, label: t('resume.canada') },
      { value: 5, label: t('resume.australia') },
      { value: 6, label: t('resume.japan') },
      { value: 7, label: t('resume.korea') },
      { value: 8, label: t('resume.germany') },
      { value: 9, label: t('resume.france') },
      { value: 10, label: t('resume.singapore') },
      { value: 11, label: t('resume.malaysia') },
      { value: 12, label: t('resume.thailand') },
      { value: 13, label: t('resume.vietnam') },
      { value: 14, label: t('resume.india') },
      { value: 15, label: t('resume.russia') },
      { value: 16, label: t('resume.other') }
    ]
  } finally {
    nationalityLoading.value = false
  }
}

// 定时器引用
let statusInterval = null

onMounted(async () => {
  if (props.isNew) {
    // 新建简历：清空所有表单数据
    resumeStore.resetResume()
    initEditorContent()
    // 新建简历不加载状态，不设置定时器
  } else {
    // 编辑简历：初始化简历数据（从后端API获取）
    await resumeStore.initResume()
    initEditorContent()
    
    // 如果传入了状态，使用传入的状态；否则从API获取
    if (props.resumeStatus && props.resumeStatus !== 'pending') {
      resumeStatus.value = props.resumeStatus
    } else {
      // 加载简历审核状态
      await loadResumeStatus()
    }
    
    // 初始检查简历完整性
    autoCheckResumeCompleteness()
    
    // 设置定时刷新状态（每30秒检查一次）
    statusInterval = setInterval(async () => {
      if (resumeStatus.value === 'pending' || resumeStatus.value === 'pending_review') {
        await loadResumeStatus()
      }
    }, 30000)
  }
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (statusInterval && !props.isNew) {
    clearInterval(statusInterval)
    statusInterval = null
  }
})

// 监听简历数据变化，自动检查完整性
watch(() => resumeStore.profile, () => {
  // 只有当当前状态为incomplete时才检查，避免覆盖后端状态
  if (resumeStatus.value === 'incomplete') {
    autoCheckResumeCompleteness()
  }
}, { deep: true })

watch(() => resumeStore.education, () => {
  if (resumeStatus.value === 'incomplete') {
    autoCheckResumeCompleteness()
  }
}, { deep: true })

watch(() => resumeStore.experience, () => {
  if (resumeStatus.value === 'incomplete') {
    autoCheckResumeCompleteness()
  }
}, { deep: true })

// 提交简历
const submitResume = async () => {
  try {
    // 检查必填字段
    const missingFields = checkRequiredFields()
    if (missingFields.length > 0) {
      ElMessage.error(`${t('resume.pleaseComplete')}: ${missingFields.join('、')}`)
      return
    }
    
    // 先保存简历数据
    const saveResult = await resumeStore.saveResume()
    
    if (saveResult.success) {
      // 提交简历审核
      const submitSuccess = await resumeStore.submitResume()
      
      if (submitSuccess) {
        ElMessage.success(t('resume.resumeSubmitted'))
        // 更新审核状态
        await loadResumeStatus()
      } else {
        ElMessage.warning(t('resume.resumeSavedSuccessfully'))
      }
    } else {
      console.error('ResumeForm - 简历保存失败:', saveResult)
      // 根据错误代码显示不同的提示
      if (saveResult.code === 'AUTH_REQUIRED') {
        ElMessage.error(t('resume.pleaseLoginFirst'))
        // 跳转到登录页面
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else if (saveResult.code === 'AUTH_EXPIRED') {
        ElMessage.error(t('resume.loginExpired'))
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else if (saveResult.code === 'VALIDATION_ERROR') {
        // 显示详细的验证错误信息
        ElMessage.error(saveResult.message || t('resume.pleaseCompleteResumeInfo'))
      } else if (saveResult.code === 'SERVER_ERROR') {
        ElMessage.error(saveResult.message || t('resume.serverError'))
      } else if (saveResult.code === 400) {
        ElMessage.error(saveResult.message || t('resume.dataValidationFailed'))
      } else if (saveResult.code === 401) {
        ElMessage.error(t('resume.loginExpired'))
        setTimeout(() => {
          window.location.href = '/login'
        }, 2000)
      } else if (saveResult.code === 500) {
        ElMessage.error(t('resume.serverInternalError'))
      } else {
        ElMessage.error(saveResult.message || t('resume.resumeSaveFailed'))
      }
    }
  } catch (error) {
    console.error('ResumeForm - 提交简历异常:', error)
    ElMessage.error(t('resume.submitResumeFailed'))
  }
}
</script>

<style scoped>
.resume-form {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  padding-bottom: 20px;
}

.required-fields-notice {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.3s ease;
}

.required-fields-notice.incomplete {
  background: #fff7ed;
  border-color: #fed7aa;
}

.missing-fields {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}

.missing-fields p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #d97706;
}

.missing-fields ul {
  margin: 0;
  padding-left: 20px;
}

.missing-fields li {
  margin-bottom: 4px;
  font-size: 14px;
  color: #d97706;
}

.status-refresh-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.status-actions {
  display: flex;
  gap: 8px;
}

.notice-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.notice-content h4 {
  margin: 0 0 4px 0;
  color: #0369a1;
  font-size: 14px;
  font-weight: 600;
}

.notice-content p {
  margin: 0;
  color: #0c4a6e;
  font-size: 13px;
  line-height: 1.4;
}

.form-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 25px;
  margin-top: 0;
  text-align: left;
}



/* 表单网格 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  text-align: left;
}

.form-group input, .form-group select {
  width: 70%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #ffffff;
  height: 36px;
}

.form-group textarea {
  width: 70%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #ffffff;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 教育经历容器 */
.education-container {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
}

.education-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.education-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  position: relative;
}

.education-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.education-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.remove-education-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.remove-education-btn:hover {
  background: #c82333;
}

.education-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.add-education-btn {
  width: 100%;
  padding: 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.add-education-btn:hover {
  background: #0056b3;
}

.add-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 技能容器 */
.skills-container {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
}

.tag-input-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tag-input {
  width: 70%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #ffffff;
  height: 36px;
  align-self: flex-start;
}

.tag-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-self: flex-start;
  width: 70%;
}

.tag {
  background: #e0e0e0;
  color: #333;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #ccc;
}

.tag-remove {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
}

.tag-remove:hover {
  opacity: 0.8;
}

/* 经验模块样式 */
.experience-container {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
}



/* 富文本编辑器样式 */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}

.toolbar-btn {
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #007bff;
}

.toolbar-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #ddd;
  margin: 0 4px;
}

.font-select {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  background: #ffffff;
  cursor: pointer;
}

.font-select:focus {
  outline: none;
  border-color: #007bff;
}

.rich-text-editor {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  background: #ffffff;
  font-family: inherit;
  line-height: 1.6;
  overflow-y: auto;
  outline: none;
}

.rich-text-editor:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 模块标题样式 */
.module-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 8px 0 4px 0;
  padding: 0 0 8px 0;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  background: none;
  display: block;
  clear: both;
}

/* 模块分割线样式 */
.module-divider {
  height: 2px;
  background: #e0e0e0;
  margin: 8px 0;
  width: 100%;
  display: block;
  clear: both;
}

/* 添加模块按钮样式 */
.module-btn {
  background: #28a745 !important;
  color: white !important;
  border-color: #28a745 !important;
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-btn:hover {
  background: #218838 !important;
  border-color: #1e7e34 !important;
}

.module-icon {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.rich-text-editor:empty:before {
  content: "请描述您的工作经验，包括工作职责、成就等";
  color: #999;
  font-style: italic;
  pointer-events: none;
}

/* 提交按钮样式 */
.submit-section {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #e0e0e0;
}

.submit-btn {
  width: 80%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
  margin: 0 auto;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.submit-icon {
  font-size: 18px;
}

/* 自定义滚动条 */
.resume-form::-webkit-scrollbar {
  width: 6px;
}

.resume-form::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.resume-form::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.resume-form::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .education-fields {
    grid-template-columns: 1fr;
  }
  

  
  .action-buttons-grid {
    grid-template-columns: 1fr;
  }
}
</style> 